<template>
    <el-container direction="vertical">
        <el-row>
            <el-col :span="4">名称</el-col>
            <el-col :span="4">值</el-col>
            <el-col :span="4">描述</el-col>
            <el-col :span="6">操作</el-col>
        </el-row>
        <el-divider></el-divider>
        <div class="info">
        <el-row>
            <div v-for="item in headform">
                <el-input v-model="item.Key" placeholder="Content-Type" style="width: 295px"></el-input>
                <el-input v-model="item.Value" placeholder="application/x-www-form-urlencoded" style="width: 295px"></el-input>
                <el-input v-model="item.Desc" placeholder="Describe" style="width: 300px"></el-input>
                <el-button @click.prevent="removeDomain(item)"><i class="fa fa-trash-o fa-lg"></i></el-button>
            </div>
        </el-row>
        </div>
        <div>
            <el-divider></el-divider>
            <el-button @click="addDomain">Add Head</el-button>
        </div>
    </el-container>
</template>

<script>
export default {
    name: 'ApiDetail',
    data(){
        return { 
            headform:[{
                Key:"",
                Value:"",
                Desc:""
            }]
        }
    },
    mounted:function () {
    },//mounted
    methods: {
        removeDomain(item) {
            var index = this.headform.indexOf(item)
            if (index !== -1) {
              this.headform.splice(index, 1)
            }
        },
        addDomain() {
            this.headform.push({
                Key:"",
                Value:"",
                Desc:""
            });
        }, 
    }
}
</script>

<style scoped>
.info{
    height:150px;
    overflow:auto
    /*background-color: orange;*/
}
.name{
    right: 10px;
}
</style>
